<template>
  <codemirror
    v-model="config"
    :options="options"
    style="font-size:16px; height:100%;width: 100%"
    class="edit"
    ref="edit"
    @blur="blur"
  ></codemirror>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { codemirror } from "vue-codemirror";
import { getConfig, setConfig } from "../init";

import "codemirror/mode/javascript/javascript";
import "codemirror/mode/nginx/nginx";
import "codemirror/lib/codemirror.css";
import "../css/vscode.css";

@Component
export default class Config extends Vue {
  public config: string = "";
  public oldConfig: string = "";
  public $refs: any;
  public options = {
    indentUnit: 4,
    tabSize: 4,
    mode:  { name: 'javascript', json: true },
    theme: "vscode",
    lineNumbers: true,
    line: true,
    smartIndent: true,
    electricChars: true,
  };

  public async mounted() {
    if (this.$refs.edit.$el.childNodes[1]) {
      this.$refs.edit.$el.childNodes[1].style.height = "100%";
    }
    this.config = JSON.stringify(await getConfig(), null, 4);
    this.oldConfig = this.config;
  }

  public blur() {
    if (this.config !== this.oldConfig) {
      setConfig(this.config);
      this.oldConfig = this.config;
    }
  }
}
</script>